<template>
  <a-form style="max-width: 800px; margin: 40px auto 0;">
    <a-form-item :wrapperCol="{ span: 24, offset: 8 }" class="stepFormText">
      <a-spin tip="发券中.....请耐心等待，预计1-10min，请不要关闭页面" size="large" :spinning="loading" v-if="loading" />

    </a-form-item>
    <a-form-item :wrapperCol="{ span: 24}" class="stepFormText" v-if="!loading" >
      <a-alert :message="execRes.message" type="warning" />
    </a-form-item>
    <a-form-item :wrapperCol="{ span: 24, offset: 10 }" class="stepFormText" v-if="!loading">
      <a-button @click="prevStep" >上一步</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
import { postAction } from '@/api/manage'

export default {
  name: "Step2",
  props: ['params'],
  data() {
    return {
      execRes: {},
      loading: true,
      url: {
        batchDistCoupon: '/marketing/sence/posMarketSence/batchDistCoupon'
      },
    }
  },
  created() {
    console.log('---step2 created---', this.params)
  },
  watch: {
    params: {
      deep: true,
      handler(val) {
        console.log('---step2 watch params---', this.params)
      }
    }
  },
  methods: {
    prevStep() {
      let that = this
      setTimeout(function () {
        that.$emit('prevStep')
      }, 200)
    },
    nextStep() {
      let that = this
      setTimeout(function () {
        that.$emit('nextStep', that.execRes)
      }, 1000)
    },
    batchDistCoupon(distModel) {
      this.loading = true
      console.log('---step2 distModel---', distModel)
      postAction(this.url.batchDistCoupon, distModel).then((res) => {
        this.execRes = res
        if (res.success) {
          this.nextStep()
        } else {
          this.$message.warning(res.message)
          this.loading = false
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.stepFormText {
  margin-bottom: 24px;

  .ant-form-item-label,
  .ant-form-item-control {
    line-height: 22px;
  }
}
</style>